// 基于准备好的dom，初始化echarts实例
var l_echart1_dom = document.getElementById('l_echart1');
var myChart = echarts.init(l_echart1_dom);

var l_echart2_dom = document.getElementById('l_echart2');
var myChart2 = echarts.init(l_echart2_dom);

var r_echart1_dom = document.getElementById('r_echart1');
var r_echart1 = echarts.init(r_echart1_dom);

var r_echart2_dom = document.getElementById('r_echart2');
var r_echart2 = echarts.init(r_echart2_dom);

// 温度图标
var option = {
  tooltip: {
    trigger: 'axis',
    axisPointer: {
      type: 'shadow'
    }
  },
  grid: {
    left: '3%',
    right: '4%',
    bottom: '3%',
    containLabel: true
  },
  xAxis: [
    {
      type: 'category',
      data: ['棉花1', '棉花2', '棉花3', '棉花4', '棉花5', '棉花6', '棉花7'],
      axisTick: {
        alignWithLabel: true
      },
    }
  ],
  axisLabel:{
    color:"#fff"
  },
  yAxis: [
    {
      type: 'value'
    }
  ],
  yxisLabel:{
    color:"#fff"
  },
  series: [
    {
      name: 'Direct',
      type: 'bar',
      barWidth: '60%',
      showBackground: true,
      itemStyle: {
        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
          { offset: 0, color: '#83bff6' },
          { offset: 0.5, color: '#188df0' },
          { offset: 1, color: '#188df0' }
        ])
      },
      emphasis: {
        itemStyle: {
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            { offset: 0, color: '#2378f7' },
            { offset: 0.7, color: '#2378f7' },
            { offset: 1, color: '#83bff6' }
          ])
        }
      },
      data: [10, 52, 200, 334, 390, 330, 220]
    }
  ]
};

//   饼状图
var option2 = {
  tooltip: {
    trigger: 'item'
  },
  legend: {
    top: '2%',
    left: 'left',
    textStyle:{
      color:"#fff"
    }
  },
  series: [
    {
      name: '货主信息',
      type: 'pie',
      radius: ['40%', '70%'],
      avoidLabelOverlap: false,
      label: {
        show: false,
        position: 'center'
      },
      emphasis: {
        label: {
          show: true,
          fontSize: '30',
          fontWeight: 'bold'
        }
      },
      labelLine: {
        show: false
      },
      data: [
        { value: 1048, name: '货主1' },
        { value: 735, name: '货主2' },
        { value: 580, name: '货主3' },
        { value: 484, name: '货主4' },
      ]
    }
  ]
};




// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
myChart2.setOption(option2);


// 后边的
var r_option1 = {
    color: ['#80FFA5', '#00DDFF', '#37A2FF', '#FF0087', '#FFBF00'],
    title: {
      text: ''
    },
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'cross',
        label: {
          backgroundColor: '#6a7985'
        }
      }
    },
    legend: {
      data: ['棉花', '货品2', '货品3', '货品4', '货品5'],
      textStyle:{
          color:"#fff"
      }
    },
    toolbox: {
      feature: {
        // saveAsImage: {}
      }
    },
    grid: {
      left: '3%',
      right: '4%',
      bottom: '3%',
      containLabel: true
    },
    xAxis: [
      {
        type: 'category',
        boundaryGap: false,
        data: ['5.11', '5.12', '5.13', '5.14', '5.15', '5.16', '5.17'],
        axisLabel:{
            color:"#fff"
        }
      }
    ],
    yAxis: [
      {
        type: 'value',
        axisLabel:{
            color:"#fff"
        }
      }
    ],
    series: [
      {
        name: '棉花',
        type: 'line',
        stack: 'Total',
        smooth: true,
        lineStyle: {
          width: 0
        },
        showSymbol: false,
        areaStyle: {
          opacity: 0.8,
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            {
              offset: 0,
              color: 'rgb(128, 255, 165)'
            },
            {
              offset: 1,
              color: 'rgb(1, 191, 236)'
            }
          ])
        },
        emphasis: {
          focus: 'series'
        },
        data: [140, 232, 101, 264, 90, 340, 250]
      },
      {
        name: '货品2',
        type: 'line',
        stack: 'Total',
        smooth: true,
        lineStyle: {
          width: 0
        },
        showSymbol: false,
        areaStyle: {
          opacity: 0.8,
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            {
              offset: 0,
              color: 'rgb(0, 221, 255)'
            },
            {
              offset: 1,
              color: 'rgb(77, 119, 255)'
            }
          ])
        },
        emphasis: {
          focus: 'series'
        },
        data: [120, 282, 111, 234, 220, 340, 310]
      },
      {
        name: '货品3',
        type: 'line',
        stack: 'Total',
        smooth: true,
        lineStyle: {
          width: 0
        },
        showSymbol: false,
        areaStyle: {
          opacity: 0.8,
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            {
              offset: 0,
              color: 'rgb(55, 162, 255)'
            },
            {
              offset: 1,
              color: 'rgb(116, 21, 219)'
            }
          ])
        },
        emphasis: {
          focus: 'series'
        },
        data: [320, 132, 201, 334, 190, 130, 220]
      },
      {
        name: '货品4',
        type: 'line',
        stack: 'Total',
        smooth: true,
        lineStyle: {
          width: 0
        },
        showSymbol: false,
        areaStyle: {
          opacity: 0.8,
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            {
              offset: 0,
              color: 'rgb(255, 0, 135)'
            },
            {
              offset: 1,
              color: 'rgb(135, 0, 157)'
            }
          ])
        },
        emphasis: {
          focus: 'series'
        },
        data: [220, 402, 231, 134, 190, 230, 120]
      },
      {
        name: '货品5',
        type: 'line',
        stack: 'Total',
        smooth: true,
        lineStyle: {
          width: 0
        },
        showSymbol: false,
        label: {
          show: true,
          position: 'top'
        },
        areaStyle: {
          opacity: 0.8,
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            {
              offset: 0,
              color: 'rgb(255, 191, 0)'
            },
            {
              offset: 1,
              color: 'rgb(224, 62, 76)'
            }
          ])
        },
        emphasis: {
          focus: 'series'
        },
        data: [220, 302, 181, 234, 210, 290, 150]
      }
    ]
  };


 var r_option2 = {
  tooltip: {
    trigger: 'axis',
    axisPointer: {
      // Use axis to trigger tooltip
      type: 'shadow' // 'shadow' as default; can also be 'line' or 'shadow'
    }
  },
  legend: {
    textStyle:{
        color:"#fff"
    }
  },
  grid: {
    left: '3%',
    right: '4%',
    bottom: '3%',
    containLabel: true
  },
  xAxis: {
    type: 'value'
  },
  axisLabel:{
      color:"#fff"
  },
  yAxis: {
    type: 'category',
    data: [ '门禁设备', '叉车设备', '红外线设备', '位置传感器', '湿度探测器', '温度探测器']
  },
  yxisLabel:{
      color:"#fff"
  },
  series: [
    {
      name: '正常运行',
      type: 'bar',
      stack: 'total',
      label: {
        show: true
      },
      emphasis: {
        focus: 'series'
      },
      data: [320, 302, 301, 334, 390, 330]
    },
    {
      name: '故障',
      type: 'bar',
      stack: 'total',
      label: {
        show: true,
        textStyle:{
            color:"rgb(150,27,77)"
        }
      },
      emphasis: {
        focus: 'series'
      },
      data: [12, 13, 21, 22, 31, 22]
    },
    
  ]
};
  r_echart1.setOption(r_option1);
  r_echart2.setOption(r_option2);








window.onresize = function() {
    myChart.resize();
};
